<template>
 <div class="container">
        <header>
            <div class="search fl">
                <input type="image" src="images/ss.jpg">
                <input type="text" name="search" placeholder="搜索附近的房源">
            </div>
            <img class="fr" src="images/top.jpg"/>
            <div class="clear"></div>
        </header>
        <section class="banner">
            <swiper :options="swiperOption" v-if="adList.length>0">
                <swiper-slide class="banner-sw" v-for="(val,index) in adList" :key="index">
                    <img :src="val.imgPath">
                </swiper-slide>
                <div class="home-swiper-pagination" slot="pagination"></div>
            </swiper>
            <!-- images/banner2.jpg -->
        </section>
        <section class="content">
            <h1>新房源</h1>
            <ul class="c">
                <li>区域<span class="icon">&#xe6aa;</span></li>
                <li>租金<span class="icon">&#xe6aa;</span></li>
                <li>户型<span class="icon">&#xe6aa;</span></li>
                <li>筛选<span class="icon">&#xe6aa;</span></li>
            </ul>
            <ul class="case">
                <li v-for="(val,index) in NewHouse" :key="index">
                    <router-link :to="{name:'detail',params:{hid:val.hid}}">
                    <a href="javascript:;">
                        <img :src="val.cover" class="fl">
                        <div class="text fr">
                            <h1>{{val.name}}</h1>
                            <p>{{val.desc}}</p>
                            <ul>
                                <li v-for="(v,k) in val.tag" :key="k" :class="v.status==='active'?'active':''">{{v.name}}</li>
                            </ul>
                            <p>{{val.rentMoney}}<span>元/月</span></p>
                        </div>
                    </a>
                    </router-link>
                </li>
            </ul>
            <p v-on:click="getMore" style="text-align: center;margin-bottom:1.5rem">{{LoadMore}}</p>
        </section>

    </div>
</template>

<script type="text/ecmascript-6">
//加载异步请求模块 (全局)
import axios from 'axios'
import Vue from 'vue'
Vue.prototype.$http = axios

  export default {
    name:'home',
    data () {
      return {
            
            swiperOption:{
                autoplay: {
                    delay: 3000,
                    stopOnLastSlide: false,
                    disableOnInteraction: false,
                },  //l轮播间隔时间
                loop: true,//是否自动轮播
                pagination : {
                    el: '.home-swiper-pagination',
                },//轮播图中下标点显示
                paginationClickable :true//轮播图中下标点显示
            },
            adList:[],
            home_page:1,
            LoadMore:'加载更多...'
      }
    },
    components: {

    },//生命周期
    mounted:function(){
        //  异步请求数据 (轮播)
        axios({
            method:'get',
            url:'./data/ad_data.json'
        }).then((res)=>{
            let data = res.data;
            if(data.code==200){
                this.adList = data.home_ad;
            }
        }).catch(function(err){
            console.log(err)
        })

        //  房源信息
        //  调用(store/)中间件方法
        
        this.$store.dispatch('getNewHouse',this.home_page);
    },
    methods:{
        //方法
        getMore(){
            if (this.$store.state.home.newHouse.length >= this.$store.state.home.max_len){
                // this.LoadMore='没有更多了...'
                return;
            }
            this.$store.dispatch('getNewHouse',++this.home_page);
        }
    },
    computed:{
        //计算属性(与data不同，它可以计算属性的值)
        NewHouse(){
            //  定义计算属性baseHouse
            return this.$store.state.home.newHouse;
        }
    },
    watch:{
        NewHouse(){
            if (this.$store.state.home.newHouse.length >= this.$store.state.home.max_len){
                this.LoadMore='没有更多了...'
                return;
            }
        }
    }
  }
</script>

<style scoped lang="less" rel="stylesheet/less">
.home-swiper-pagination{
    text-align: center;
    position: absolute;
    z-index: 10;
}
header {
    height: .7rem;
    margin: .35rem .25rem 0;
    font-size: .28rem;
}

header .search {
    width: 82%;
    height: .7rem;
    background-color: #f7f7f7;
    position: relative;
}

header .search input[type="image"] {
    margin-left: .33rem;
    margin-top: .23rem;
    width: .24rem;
    height: .24rem;
}

header .search input[type="text"] {
    background-color: #f7f7f7;
    border: none;
    padding-left: 5px;
}

header>img {
    width: .38rem;
    height: .38rem;
    margin-top: .13rem;
}

.navtop ul {
    display: flex;
    justify-content: space-around;
    margin: .42px 0;
}

.navtop ul li {
    /*width: 1rem;*/
    width: 25%;
    height: 1.1rem;
    text-align: center;
}

.navtop ul li a {
    width: 100%;
    height: 100%;
    display: block;
}

.navtop ul li img {
    width: .46rem;
    height: .46rem;
    display: block;
    margin: 0 auto;
}

.navtop ul li p {
    color: #5e5e5e;
    font-size: .28rem;
    margin-top: .18rem;
}

.content {
    margin: 0 .24rem 1.6rem;
}

.content>h1 {
    font-size: .48rem;
    margin: .45rem 0;
}
.swiper-container {
            width: 100%;
            height: 100%;
        }

.swiper-container-horizontal>.swiper-pagination-bullets {
    bottom: .06rem;
}

.swiper-pagination-bullet {
    border-radius: 0;
}

.banner img {
    border-radius: 0rem;
}

.swiper-pagination-bullet {
    opacity: 1;
    background: white;
}

.swiper-pagination-bullet-active {
    background: red;
}
 
</style>
